<template>
    <NCard class="tabs">
        <n-tabs type="bar" animated v-model:value="whichTab" @before-leave="handleBeforeLeave">
            <template #prefix>
                <NIcon size="20px">
                    <LearningApp24Regular></LearningApp24Regular>
                </NIcon>
                <span style="margin-right: 0.5rem;margin-left: 0.25rem;font-weight: 900;">个性化学习</span>
            </template>
            <template #suffix>
                <NButton type="success" @click="handleFinishLearn">完成当前学习</NButton>
            </template>
            <!-- tab-style="background-color:#fff" pane-style="background-color:#fff" pane-wrapper-style="background:#fff" -->
            <n-tab-pane name="item" tab="学习资源推荐">
                <NGrid cols="1 500:12" :x-gap="24" :y-gap="24" style="padding-bottom: 20px;">
                    <NGridItem v-for="i in itemList" offset="0 500:1" span="1 500:10">
                        <LearningItem :data="i" />
                    </NGridItem>
                </NGrid>
            </n-tab-pane>
            <n-tab-pane name="article" tab="文章学习">
                <NGrid cols="1 500:12" :x-gap="24" :y-gap="24" style="padding-bottom: 20px;">
                    <NGridItem v-for="i in articleList" offset="0 500:1" span="1 500:10">
                        <LearningItem :data="i" />
                    </NGridItem>
                </NGrid>
            </n-tab-pane>
            <n-tab-pane name="video" tab="视频学习">
                <NGrid cols="1 500:12" :x-gap="24" :y-gap="24" style="padding-bottom: 20px;">
                    <NGridItem v-for="i in videoList" offset="0 500:1" span="1 500:10">
                        <LearningItem :data="i" />
                    </NGridItem>
                </NGrid>
            </n-tab-pane>
        </n-tabs>
    </NCard>
</template>

<script setup lang="ts">
import { NTabs, NTabPane, NCard, NIcon, NGrid, NGridItem, NScrollbar, NButton } from "naive-ui";
import { ref, computed } from "vue";
import { LearningApp24Regular } from '@vicons/fluent'
import router from '@/router';

import LearningItem from "@/components/LearningItem.vue";

import learnUtils from "@/api/learn";
import progressApi from "@/api/progress";
import { h } from "vue";

const tabs = ['item', 'article', 'video'];
console.log(router.currentRoute.value.params.type);

const whichTab = computed(() => {
    return tabs.includes(String(router.currentRoute.value.params.type))
        ? String(router.currentRoute.value.params.type)
        : 'item';
})

function handleBeforeLeave(tabName: string) {
    router.push({ name: "learn", params: { type: tabName } })
    return true;
}


const articleList = ref([] as Array<{}>);

const videoList = ref([] as Array<{}>);

const itemList = ref([] as Array<{}>);

learnUtils.listLearnItems().then(
    (data) => {
        console.log(data);
        itemList.value.length = 0;
        itemList.value.push(...data);
    }
).catch((err) => {
    console.log(err);
});
learnUtils.listLearnVideos().then(
    (data) => {
        console.log(data);
        videoList.value.length = 0;
        videoList.value.push(...data);
    }
).catch((err) => {
    console.log(err);
});

learnUtils.listLearnArticles().then(
    (data) => {
        console.log(data);
        articleList.value.length = 0;
        articleList.value.push(...data);
    }
).catch((err) => {
    console.log(err);
});

function handleFinishLearn() {
    window.$utils.dialog.success({
        title: "确认完成",
        content: "确定要完成当前学习内容吗？",
        positiveText: "确定",
        negativeText: "取消",
        onPositiveClick: () => {
            // 这里假设有当前学习内容的id，需根据实际情况传递
            progressApi.addMastered({ id: "当前内容id" }).then(() => {
                window.$utils.message.success("已完成当前学习！");
            }).catch(() => {
                window.$utils.message.error("操作失败");
            });
        }
    });
}
</script>

<style scoped>
@media (max-width: 599px) {
    .tabs {
        width: calc(599px - 200px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .tabs {
        width: calc(100% - 200px);
        margin-left: 100px;
        margin-right: 100px;
    }
}

.tabs {
    margin-top: 1rem;
}


@media (max-width: 799px) {
    .modal {
        width: calc(799px - 400px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 800px) {
    .modal {
        width: calc(100% - 400px);
        margin-left: 200px;
        margin-right: 200px;
    }
}

.modal {
    --useless-var: 114514px;
}
</style>